<script setup>
	import {
		reactive
	} from 'vue';
	import UniForms from "../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
	import UniFormsItem from "../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
	import UniEasyInput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";

	const data = reactive({
		username: "",
		password: "",
	});

	function submit() {
		uni.navigateTo({
			url: '/pages/student/list'
		});
	}
</script>

<template>
	<div class="container">
		<div class="example">
			<UniForms>
				<UniFormsItem>
					<UniEasyInput v-model="data.username" placeholder="用户名" />
				</UniFormsItem>
				<UniFormsItem>
					<UniEasyInput type="password" v-model="data.password" placeholder="密码" />
				</UniFormsItem>
			</UniForms>
			<button type="primary" @click="submit()">登录</button>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.container {
		width: 100vw;
		height: calc(100vh - 44px);
	}

	.example {
		padding: 30px 15px;
		background-color: #fff;
		width: 90%;
		max-width: 400px;
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translateX(-50%) translateY(-50%);
		box-shadow: 0 0 30px 1px #88888888;
		border-radius: 10px;
	}
</style>